<template>
  <div class="rt-table">
    <div class="rt-top">
      <div class="rt-top-left"></div>
      <div class="rt-top-right">
        <slot name="topBtnList"></slot>
      </div>
    </div>
    <el-table ref="table" :data="tableData">
      <!-- checkbox列 -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="56"
        :align="'center'"
      >
      </el-table-column>
      <!-- 序号列 -->
      <el-table-column
        v-if="index"
        type="index"
        width="56"
        label="序号"
      ></el-table-column>
      <!-- columnData属性列 -->
      <!-- columnData属性列 -->
      <template v-for="item in columnData" :key="item.id">
        <!-- 扩展列 -->
        <el-table-column
          v-if="item.type === 'link'"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sort"
          :formatter="item.formatter"
        >
          <template #default="scope">
            <slot :name="item.prop" v-bind="scope"></slot>
          </template>
        </el-table-column>
        <!-- 标签列 -->
        <el-table-column
          v-else-if="item.type === 'tag'"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sort"
          :filters="item.filters"
          :filter-method="filterTag"
        >
          <template #default="scope">
            <slot :name="item.prop" v-bind="scope"></slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'solt'"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sort"
          :filters="item.filters"
          :filter-method="filterTag"
        >
          <template #default="scope">
            <slot :name="item.prop" v-bind="scope"></slot>
          </template>
        </el-table-column>
        <!-- 其他正常列 -->
        <el-table-column
          v-else
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :sortable="item.sort"
        >
        </el-table-column>
      </template>
    </el-table>

    <div class="rt-foot">
      <!-- 右侧分页器组件 -->
      <div class="rt-foot-left"></div>
      <el-pagination
        small="small"
        layout="total, prev, pager, next "
        :background="background"
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, toRaw, watch } from "vue";

const background = ref(true);

const total = ref(1000);

const emit = defineEmits();

const currentPage = computed({
  get() {
    return props.page;
  },
  set(val) {
    emit("update:page", val);
  },
});
const pageSize = computed({
  get() {
    return props.limit;
  },
  set(val) {
    emit("update:limit", val);
  },
});

const props = defineProps({
  tableData: {
    type: Array,
  },
  columnData: {
    type: Array,
  },
  selection: Boolean,
  index: Boolean,
  total: {
    required: true,
    type: Number,
  },
  page: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 10,
  },
  pagerCount: {
    type: Number,
    default: document.body.clientWidth < 992 ? 5 : 7,
  },
});

const handleSizeChange = (val) => {
  emit("getList", { page: val, limit: pageSize.value });
};
const handleCurrentChange = (val) => {
  if (currentPage.value * val > props.total) {
    currentPage.value = 1;
  }
  emit("getList", { page: currentPage.value, limit: val });
};
</script>

<style lang="scss" scoped>
.rt-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
}
.rt-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
}
</style>
